<template>
  <div>
    <!-- 顶部标题栏 -->
    <mt-header title="信息管理系统"></mt-header>
    <!--所有即将变化的页面中都会被tmpl的样式生效，相当于一个div包裹-->
    <!-- out-in表示元素先离开，在进入（默认是同进同出） -->
    <transition name="fade" mode="out-in">
      <router-view class="tmpl"/>
    </transition>
    <!-- 底部tabbar -->
    <mt-tabbar v-model="selected">
      <mt-tab-item id="Home">
        <img slot="icon" src="../static/image/index.png">
        首页
      </mt-tab-item>
  <mt-tab-item id="Member">
    <img slot="icon" src="../static/image/vip.png">
    会员
  </mt-tab-item>
  <mt-tab-item id="Shopcart">
    <img slot="icon" src="../static/image/shopcart.png">
    购物车<mt-badge size="small" type="error">{{getNum}}</mt-badge>
  </mt-tab-item>
  <mt-tab-item id="Search">
    <img slot="icon" src="../static/image/find.png">
    查找
  </mt-tab-item>
</mt-tabbar>
  </div>
</template>

<script>
import MyBus from './MyBus'
import {mapGetters} from 'vuex'
export default {
  name: 'App',
  methods:{
    change(val){
      console.log()
      //this.selected = val;
      this.$route.push({
        name:val
      })
    }
  },
  computed: {
    ...mapGetters([
      'getNum'
    ])
  },
  created() {

  },
  data (){
    return {
      selected:'',
    }
  },
  watch:{
    //不能使用箭头函数，因为this会向上级绑定
    selected:function(newV,oldV){
      console.log(newV); //页面的改变
      this.$router.push({
        name:newV
      });
    }
  }
}
</script>

<style scoped>
  .mint-tabbar{
    position: fixed;
    bottom: 0;
  }
  /*淡入淡出*/
  .fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
